<template>
  <div>
    <DynamicTable row-key="id" header-title="待处理不计考核" :showToolBar="props.showToolBar" :search = "props.search"  show-index :data-request="todoDisregardList" :columns="columns"
      bordered size="small">
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'disregardNo'">
          <a class="workOrderNumber" v-on:click="openDetailModal(record, 'disregard')">{{ record.disregardNo }} </a>
        </template>
        <template v-if="column.dataIndex === 'workOrderNumber'">
          <a class="workOrderNumber" v-on:click="openDetailModalOrder(record)">{{ record.workOrderNumber }} </a>
        </template>
        <template v-if="column.dataIndex === 'handle'">
          <a class="workOrderNumber" v-on:click="toHandle(record)">办理</a>
        </template>
      </template>
    </DynamicTable>
    <DraggableModal v-model:visible="processHisvisible" title="流转历史"
                    :body-style="{ maxHeight: '500px', overflowY: 'auto' }" :destroyOnClose="true" :centered=false width="60%"
                    :keyboard="false" :fullscreen=false :closable=true footer="">
                    <processHistory :process-his-show="processHisShow" :order-info-show="orderInfoShow" :reply-show="replyShow" 
      :extension-show="extensionShow" :supervise-show="superviseShow" :return-visit-show="returnVisitShow" :data-object="pageDataObj"
        :work-order-number="workOrderNumber" :instance-id="instanceId"></processHistory>    </DraggableModal>
  </div>
</template>

<script lang="ts" setup>
import { pageDataObj, disregardColumns, type TableColumnItem } from './columns';
import { disregardschemas } from '@/views/workorder/disregard/formSchemas';
import { workorderschemas } from '@/views/workorder/order/formSchemas';
import { dictPotionsListApi } from '@/api/workorder/select';
import { getWorkOrderByWorkOrderNumber } from '@/api/workorder/order';
import { todoDisregardList } from '@/api/workorder/task';
import { useTable } from '@/components/core/dynamic-table';
import { useFormModal } from '@/hooks/useModal/useFormModal';
import { listAttament } from '@/api/workorder/common/attachment';
import { useRouter } from 'vue-router'
import { getCategaryList } from '@/api/workorder/categary';
import {ref} from "vue";
import {string} from "vue-types";
import processHistory from '@/views/workorder/task/processHistory/index.vue';
import { DraggableModal } from '@/components/core/draggable-modal';
import { getDeptList } from '@/api/system/dept';


defineOptions({
  name: 'todo-disregard-list',
});

const props = defineProps({
  showToolBar: {
    type: Boolean,
    default: true,
    required: false,
  },
  search: {
    type: Boolean,
    default:true,
    required: false,
  },
})

// 流转历史是否显示
const processHisvisible = ref(false);
let instanceId = ref(string);
let workOrderNumber = ref(string);

const [DynamicTable, dynamicTableInstance] = useTable();
const [showModal] = useFormModal();
const router = useRouter()
let modelTitle = ref('');
let processHisShow = ref(false)
let orderInfoShow = ref(false);
let replyShow = ref(false);
let extensionShow = ref(false);
let superviseShow = ref(false);
let returnVisitShow = ref(false);
/**
 * @description 查看不计考核申请单前倾
 */
const openDetailModal = async (record, formType) => {
  let thisschemas = formType == 'disregard' ? disregardschemas : workorderschemas;
  record = formType == 'disregard' ? record : await getWorkOrderByWorkOrderNumber(record.workOrderNumber);
  const [formRef] = await showModal({
    modalProps: {
      title: `${record.id ? '查看' : '新增'}${formType == 'disregard' ? '不计考核认定' : '工单'}信息`,
      width: '80%',
      okButtonProps: { disabled: true },
      cancelText: '关闭',
    },
    formProps: {
      labelWidth: 100,
      schemas: thisschemas,
    },
  });
  // 填充表单数据
  formRef?.setFieldsValue({
    ...record,
  });
  // 设置表单禁用属性
  formRef?.setSchemaFormProps({
    disabled: true,
    requiredMark: false,
  });
  // 非必填信息清除
  formRef?.updateSchema({
    field: 'remarks',
    componentProps: {
      placeholder: "",
    },
  })
  // 添加附件列表
  let data = await listAttament({ 'bussId': record.id });
  let initFileData = [];
  data.forEach((fileData) => {
    initFileData.push({
      uid: fileData.id,
      name: fileData.fileName,
      status: 'done',
    });
  })
  formRef?.updateSchema({
    field: 'attament',
    componentProps: {
      fileList: initFileData
    },
  })
};

// 自定义转码字典
dictPotionsListApi({ "code": 'approve_status' }).then((res) => {
  pageDataObj.approveStatusDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
}).then(() => {
  // 改变搜索框数据
  dynamicTableInstance?.getQueryFormRef()?.updateSchema({
    field: `approveStatus`,
    componentProps: {
      options: pageDataObj.approveStatusDict,
    },
  });
});
// 自定义转码字典
dictPotionsListApi({ "code": 'workorder_type' }).then((res) => {
  pageDataObj.workOrderTypeDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
}).then(() => {
  // 改变搜索框数据
  dynamicTableInstance?.getQueryFormRef()?.updateSchema({
    field: `workOrderTypes`,
    componentProps: {
      options: pageDataObj.workOrderTypeDict,
    },
  });
});
dictPotionsListApi({ "code": 'info_serrces' }).then((res) => {
  pageDataObj.infoSerrcesTypeDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
})
dictPotionsListApi({ "code": 'region' }).then((res) => {
  pageDataObj.regionDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
})
dictPotionsListApi({ "code": 'workorder_status' }).then((res) => {
  pageDataObj.workOrderStatus = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
})
dictPotionsListApi({ "code": 'area' }).then((res) => {
  pageDataObj.areaDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
})
getCategaryList({ "sysCode": 'workorder', 'visible': '0', 'categaryCode': 'industry_type' }).then((res) => {
  pageDataObj.industryTypeDict = res.map((item) => ({
    label: item.name,
    value: item.code,
  }));
});
getDeptList().then((res) => {
  pageDataObj.responsibleUnitDict = res.map((item) => ({
    label: item.name,
    value: item.id,
  }));
})
const columns: TableColumnItem[] = [
  ...disregardColumns,
  {
    title: '操作',
    width: 100,
    dataIndex: 'ACTION',
    hideInSearch: true,
    align: 'center',
    fixed: 'right',
    actions: ({ record }) => [
      {
        label: '流程',
        onClick: () => processHisvisibleModel(record)
      },
    ],
  },
];

const toHandle = (record) => {
  router.push({ name: 'disregard/todoDisregard', query: { itemId: record.id } })
}

/**
 * @description 打开新增/编辑弹窗
 */
 async function openDetailModalOrder(record) {
  // 打开操作框选择页面
  let data = record;
  processHisvisible.value = true;
  instanceId = data.instanceId;
  workOrderNumber = data.workOrderNumber;
  modelTitle.value = '工单信息';
  processHisShow.value = false;
  orderInfoShow.value = true;
  replyShow.value = true;
  extensionShow.value = true;
  superviseShow.value = true;
  returnVisitShow.value = true;
};

async function processHisvisibleModel(record) {
  // 打开操作框选择页面
  processHisvisible.value = true;
  instanceId = record.instanceId;
  workOrderNumber = record.workOrderNumber;
  modelTitle.value = '流转历史';
  processHisShow.value = true;
  orderInfoShow.value = false;
  replyShow.value = false;
  extensionShow.value = false;
  superviseShow.value = false;
  returnVisitShow.value = false;
}
</script>
<style lang="less">
.ant-input-number {
  width: 100%;
}

.workOrderNumber {
  color: #1890ff;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ant-tooltip-inner{
  width: 500px;
}
</style>

